import { Stack } from "expo-router"
import { View,Text, ScrollView } from "react-native"
import { TracksList } from "@/components/TracksList"
import { screenPadding } from "@/constants/tokens"
import { defaultStyles } from "@/styles"
import { useNavigationSearch } from "@/hooks/useNavigationSearch"
import library from '@/assets/data/library.json'
import { useMemo } from "react"
import { trackTitleFilter } from "@/helpers/filter"

const SongsScreen = () => {
	const search = useNavigationSearch({
		searchBarOptions: {
			placeholder: '搜索歌曲'
		}
	})
	const filteredSongs = useMemo(() => {
			if(!search) return library;
		
			return library.filter(trackTitleFilter(search))
	}, [search])
	return (
		<View style={defaultStyles.container}>
			<ScrollView contentInsetAdjustmentBehavior="automatic" style={{
				paddingHorizontal: screenPadding.horizontal
			}}>
			<TracksList tracks={filteredSongs}  scrollEnabled = {false}  />
			</ScrollView>
        
		</View> 
	)
}

export default SongsScreen;